import React from 'react';
import style from './index.less';
import Editor from '../../components/Editor';
import { Drawer, Button, Form, Input, Select, Icon } from 'antd';
import {contact } from '../../store';
const formItemLayout = {
    labelCol: {
      xs: { span:3 },
    },
    wrapperCol: {
      xs: { span: 20 },
    },
  };
interface Props {
    onClose: Function,
    visible: boolean
}
export default class Component extends React.Component<Props>{

    render () {
        return (<Drawer
        title={
        <div>写邮件 <Button style={{float: 'right', marginRight: 20}} shape="round" size="small">存草稿</Button></div>
        }
        width={600}
        style={{
            position: 'absolute',
        }}
        className={style.drawer}
        maskStyle={{
            position:'absolute'
        }}
        getContainer= {
            () =>  document.getElementById('content')
        }
        onClose={() => this.props.onClose()}
        closable
        visible={this.props.visible}
    >
        <Form {...formItemLayout} colon={false}>
            <Form.Item label="收件人" className={style.formItem}>
                <Select
                    mode="multiple"
                    className={style.input}
                    size="large"
                    style={{ width: '100%' }}
                    placeholder="输入邮箱"
                    defaultValue={[]}
                >
                    {
                        contact.map((item) => <Select.Option value={item.mail}>{item.name}<small style={{ color: "#cbcbcb", float: "right"}}>{item.mail}</small></Select.Option>
                        )
                    }
                </Select>
            </Form.Item>
            <Form.Item label="抄送"  className={style.formItem}>
                <Select
                    className={style.input}
                    mode="multiple"
                    style={{ width: '100%' }}
                    placeholder="输入邮箱"
                    defaultValue={[]}
                >
                    {
                        contact.map((item) => <Select.Option value={item.mail}>{item.name}<small style={{ color: "#cbcbcb", float: "right"}}>{item.mail}</small></Select.Option>
                        )
                    }
                </Select>
            </Form.Item>
            <Form.Item label="主题"  className={style.formItem}>
                <Input className={style.input}  placeholder="请输入标题"/>
            </Form.Item>
            <Form.Item label="正文"  className={style.formItem}>
                <Editor onChange={() => {}} value=""/>
            </Form.Item>
            <Form.Item label=" "  className={style.formItem}>
                <Button size="large" type="primary" icon="enter" style={{padding: "0 30px"}}>发送</Button>
            </Form.Item>
        </Form>
    </Drawer>)
    }
}